<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .bg {
        background-image: url("./lazyImg/09.png");
      }
    </style>
  </head>

  <body>
    <!-- <img src="./lazyImg/09.png" alt="" style="display: none;"> -->
    <!-- <div class="bg"></div> -->
    <button id="btn">即将加载图片</button><br />
    <ul>
      <li>
        <!-- 需要预加载的图片标签 -->
        <!-- <img src="./lazyImg/01.jpeg" width="200"> -->
      </li>
      <li>
        <!-- <img src="./lazyImg/02.jpeg" width="200"> -->
      </li>
    </ul>
    <!-- 
        预加载 (资源预加载)
        前端性能优化的一种技术, 预先告知浏览器某些资源需要进行提前加载(提前使用)

        为什么要使用预加载?
        1. 为了用户更好的体验, 提前预知用户需要的资源加载
        2. 减少用户请求时间

        缺点
        增加服务器压力(资源的加载负载)

        预加载实现原理
        1. html+css实现
        2. css background实现
        3. css+js实现
    -->

    <script>
      let btn = document.getElementById("btn");
      // 用于存预加载的图片标签(处理好的图片)
      let imgArr = [];
      // 获取li
      let list = document.querySelectorAll("li");

      // 提前处理
      preload();
      // 封装预加载函数
      function preload() {
        // 创建需要预加载的图片
        list.forEach((el, idx) => {
          let newImg = new Image(200);
          newImg.src = `./lazyImg/0${idx + 1}.jpeg`;
          // 处理好的图片标签push到数组里面
          imgArr.push(newImg);
        });
      }

      btn.addEventListener("click", () => {
        list[0].appendChild(imgArr[0]);
        list[1].appendChild(imgArr[1]);

        // 手动创建图片标签
        // let newImg = new Image(300);
        // newImg.src = "./lazyImg/09.png";
        // document.body.appendChild(newImg);
        // console.log(newImg);

        // 获取预先加载的图片标签, 并且插入到body里面 (html+css实现)
        // let img = document.querySelector("img");
        // img.style.display = "block";
        // document.body.appendChild(img);

        // let bg = document.querySelector(".bg");
        // // console.log(bg.style);
        // // console.log(getComputedStyle(bg).backgroundImage.slice(5, -2));
        // let imgSrc = getComputedStyle(bg).backgroundImage.slice(5, -2);
      });
    </script>
  </body>
</html>
